import { ProForm, ProFormSelect } from '@ant-design/pro-components';
import { Card, Tabs } from 'antd';
const FlowForm = (props: any) => {
  return (
    <Card
      title="工序配置"
      style={{ minWidth: '220px', maxWidth: '220px', borderRadius: 0 }}
      bodyStyle={{
        padding: '6px ',
        height: 'calc(500px - 35px)',
        overflow: 'scroll',
      }}
      headStyle={{ borderRadius: 0, padding: '0px 2px', maxHeight: 35, minHeight: 35 }}
    >
      <Tabs
        defaultActiveKey="1"
        tabBarGutter={8}
        size="small"
        // style={{ height: 220 }}
        items={['属性', '人员', '设备', '物料', '工装', '环境', '物流'].map((item, i) => {
          const id = String(i);
          return {
            label: item,
            key: id,
          };
        })}
      />
      <ProForm size="small" onFinish={async (values) => console.log(values)}>
        <ProForm.Group size={'small'}>
          <ProFormSelect
            width={'sm'}
            key="useMode1"
            rules={[
              {
                required: true,
              },
            ]}
            options={[
              {
                value: '1',
                label: '人工',
              },
              {
                value: '0',
                label: '自动导航车',
              },
            ]}
            name="useMode1"
            label="转运方式"
          />
          <ProFormSelect
            width={'sm'}
            key="useMode33323"
            rules={[
              {
                required: true,
              },
            ]}
            options={[
              {
                value: '0',
                label: '从设备类型中选择',
              },
              {
                value: '1',
                label: '叉车式导航车',
              },
              {
                value: '2',
                label: '潜伏式导航车',
              },
              {
                value: '3',
                label: '重载式导航车',
              },
            ]}
            name="useMode33323"
            label="转运方式"
          />
          <ProFormSelect
            mode="multiple"
            allowClear
            width={'sm'}
            key="useMode33123"
            rules={[
              {
                required: true,
              },
            ]}
            options={[
              {
                value: '3',
                label: '1#',
              },
              {
                value: '2',
                label: '2#',
              },
              {
                value: '1',
                label: '3#',
              },
            ]}
            name="useMode33123"
            label="导航车"
          />
          <ProFormSelect
            width={'sm'}
            key="useMode1123"
            rules={[
              {
                required: true,
              },
            ]}
            options={[
              {
                value: '3',
                label: '存储',
              },
              {
                value: '2',
                label: '不存储',
              },
            ]}
            name="useMode1123"
            label="线边存储"
          />
          <ProFormSelect
            width={'sm'}
            key="useMode13213"
            rules={[
              {
                required: true,
              },
            ]}
            options={[
              {
                value: '3',
                label: '仓库1',
              },
              {
                value: '2',
                label: '仓库2',
              },
            ]}
            name="useMode13213"
            label="存储区域"
          />
        </ProForm.Group>
      </ProForm>
    </Card>
  );
};

export default FlowForm;
